<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<link rel="stylesheet" href="./dl.css">
<link rel="stylesheet" href="./font/iconfont.css">
<script src="./font/iconfont.js"></script>
<style>
   
</style>
<body>
    <div id="page">
        <div id="header" class="clearfix">
            <div class="logo">
                <h1>
                    <a title="淘宝网" class="logo-link" href="//www.taobao.com"></a>
                </h1>
            </div>
            <div class="header-right">
                <li>
                    <a href="">网站无障碍</a>  
                </li> 
                <li>
                 <a href=""><span class="iconfont">&#xe763;</span>"登录页面"改进建议</a> 
                </li>
                
            </div>
        
        </div>
        <div id="content">
            <div class="login-adlink">
                <a href="https://www.taobao.com/m?spm=a2107.1.0.0.2bd611d9CY4U9T"></a>
            </div>
            <div class="login-box-warp">
                <div class="passdword">
                    <div class="dl">
                        <a href="" class="active">密码登录</a>
                        <a href="">短信登录</a>
                    </div>
                    <div class="dlpage">
                       <form action="">
                        <table>
                            <div>
                                
                            </div>
                            <tr>
                                <td class="dltb"><span class="iconfont">
                                    &#xe614;</span></td>
                                <td><input type="text" name="username" placeholder="请输入用户名"></td>
                            </tr>
                            <tr>
                                <td class="dltb"><span class="iconfont">&#xe64b;</span></td>
                                <td><input type="password" name="password" placeholder="请输入密码"></td>
                            </tr>
                            <tr>
                                <td ></td>
                                <td>
                                    <input type="submit" value="登录" class="s" style="width: 300px;">
                                </td>
                            </tr>
                        </table>
                    </form>  
                    </div>
                   
                <div class="dlfs">
                    <li>
                        <svg class="icons" aria-hidden="true">
                            <a href=""><use xlink:href="#icon-shejiaotubiao-42"></use></a>
                          </svg>
                        <span><a href="">微博登录</a></span>
                    </li>
                    <li>
                        <svg class="icons1" aria-hidden="true">
                           <a href=""><use xlink:href="#icon-zhifupingtai-zhifubao"></use> </a>
                          </svg>
                        <span><a href="">支付宝登录</a></span>
                    </li>
                </div>
                <div class="dlbottom">
                    <ul>
                        <li><a href="">忘记密码</a></li>
                        <li><a href="">忘记账户名</a></li>
                        <li><a href="./zc.html">免费注册</a></li>
                    </ul>
                </div>

            </div>
        </div>
        </div>
        <div class="fotter">
            <div class="fotter-hd">
                <p>
                 <a href="">阿里巴巴集团 <b>|</b> </a>
                 <a href="">阿里巴巴国际站 <b>|</b></a>
                 <a href="">阿里巴巴中国站 <b>|</b></a>
                 <a href="">全球速卖通 <b>|</b></a>
                 <a href="">淘宝网 <b>|</b></a>
                 <a href="">天猫<b>|</b></a>
                 <a href="">一淘 <b>|</b></a>
                 <a href="">阿里妈妈 <b>|</b></a>
                 <a href="">飞猪 <b>|</b></a>
                 <a href="">阿里云计算 <b>|</b></a>
                 <a href="">云OS <b>|</b> </a>
                 <a href="">支付宝 <b>|</b></a> 
                 <a href="">万网 <b>|</b></a>
                 <a href="">虾米</a>
                </p>

            </div>
    </div>
</body>
</html>
<script src="./js/utils.js"></script>
<script>
var form = document.querySelector('form');
var username = document.querySelector('[name="username"]');
var password = document.querySelector('[name="password"]');
// 绑定事件
form.addEventListener('submit', submit)
function submit() {
    // 要加表单校验

    // 阻止默认行为
    window.event.returnValue = false
    // 发送请求
    var xhr = new XMLHttpRequest()
    xhr.open('post', 'http://localhost:8888/users/login')
    xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded')
    var params = `username=${username.value}&password=${password.value}`
    xhr.send(params)
    xhr.onreadystatechange = function() {
        if(xhr.readyState === 4) {
            if(xhr.status>=200 && xhr.status<300) {
                var res = xhr.responseText
                res = JSON.parse(res)
                console.log(res);
                var {message, code, user: {id: userId}, token} = res
                if(code === 1) {
                    alert(message)
                    // 跳转到登录页面
                    // 用函数设置cookie
                    setCookie('username', username.value, 7200)
                    setCookie('userId', userId, 7200)
                    // 存储令牌
                    // 在本地存储存储：cookie会在请求头和响应头之间进行传递 - 每次请求都会在请求头中携带cookie，响应头中也会携带cookie - 自动的 - 本地存储中的数据是在浏览器上，什么时候传，就传，不会自动带来带去，能相对安全一点
                    localStorage.setItem('token', token)

                    // 获取地址栏中的goto，如果有goto，就跳转到goto对应的页面中，如果没有goto，就默认跳转到首页
                    // console.log(location.search);
                    // var reg = /goto=(.+)/
                    // var arr = location.search.match(reg)
                    // // console.log(arr);
                    // if(arr && arr[1]) {
                    //     location.href = arr[1]
                    // } else
                    // location.href = 'home.html'

                    // 如果是本地存储
                    var url = localStorage.getItem('url')
                    if(url) {
                        // 在跳转之前要将本地存储中的地址删除掉
                        localStorage.removeItem('url')
                        location.href = url
                    }else
                    location.href = 'list.html'
                } else {
                    alert(message)
                }
            }
        }
    }
}
    </script>